<template>
  <div class="voice-recorder">
    <div 
      class="recorder-button"
      :class="{ 'recording': isRecording }"
      @mousedown="startRecording"
      @mouseup="stopRecording"
      @mouseleave="cancelRecording"
      @touchstart="startRecording"
      @touchend="stopRecording"
    >
      <el-icon v-if="!isRecording"><Microphone /></el-icon>
      <el-icon v-else><Loading class="is-loading" /></el-icon>
      <span class="button-text">{{ isRecording ? '松开结束' : '按住说话' }}</span>
    </div>
    
    <div v-if="isRecording" class="recorder-overlay" @mouseup="cancelRecording">
      <div class="cancel-area" @mouseup="cancelRecording">
        <div class="cancel-icon">
          <el-icon><Close /></el-icon>
        </div>
        <div class="cancel-text">上滑取消</div>
      </div>
    </div>
    
    <div v-if="isRecording" class="recorder-popup">
      <div class="waveform">
        <div 
          v-for="(bar, index) in waveformBars" 
          :key="index"
          class="wave-bar"
          :style="{ height: bar + 'px' }"
        ></div>
      </div>
      <div class="recording-time">{{ formatTime(recordingTime) }}</div>
      <div class="recording-tip">松开发送，上滑取消</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElIcon } from 'element-plus'
import { Microphone, Loading, Close } from '@element-plus/icons-vue'

const emit = defineEmits(['record-start', 'record-stop', 'record-cancel'])

// 录音状态
const isRecording = ref(false)
const recordingTime = ref(0)
const waveformBars = ref(Array(20).fill(2))

// 定时器
let recordingTimer = null
let waveformTimer = null

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 开始录音
const startRecording = (event) => {
  event.preventDefault()
  if (isRecording.value) return
  
  isRecording.value = true
  recordingTime.value = 0
  
  // 开始计时
  recordingTimer = setInterval(() => {
    recordingTime.value++
    // 限制录音时长为60秒
    if (recordingTime.value >= 60) {
      stopRecording()
    }
  }, 1000)
  
  // 模拟波形动画
  waveformTimer = setInterval(() => {
    waveformBars.value = waveformBars.value.map(() => 
      Math.floor(Math.random() * 20) + 2
    )
  }, 100)
  
  emit('record-start')
}

// 停止录音
const stopRecording = () => {
  if (!isRecording.value) return
  
  clearInterval(recordingTimer)
  clearInterval(waveformTimer)
  
  isRecording.value = false
  emit('record-stop', {
    duration: recordingTime.value
  })
}

// 取消录音
const cancelRecording = () => {
  if (!isRecording.value) return
  
  clearInterval(recordingTimer)
  clearInterval(waveformTimer)
  
  isRecording.value = false
  emit('record-cancel')
}

// 清理定时器
onUnmounted(() => {
  if (recordingTimer) clearInterval(recordingTimer)
  if (waveformTimer) clearInterval(waveformTimer)
})
</script>

<style scoped>
.voice-recorder {
  position: relative;
}

.recorder-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  background-color: #f5f5f5;
  color: #3B82F6;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}

.recorder-button:hover {
  background-color: #e8f3ff;
}

.recorder-button.recording {
  background-color: #f56c6c;
  color: white;
}

.button-text {
  font-size: 14px;
}

.recorder-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1000;
}

.cancel-area {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cancel-icon {
  font-size: 24px;
  color: #f56c6c;
  margin-bottom: 8px;
}

.cancel-text {
  font-size: 14px;
  color: #666;
}

.recorder-popup {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  color: white;
  text-align: center;
  z-index: 1001;
}

.waveform {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  gap: 2px;
  margin-bottom: 12px;
}

.wave-bar {
  width: 4px;
  background: #409eff;
  border-radius: 2px;
  transition: height 0.1s;
}

.recording-time {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.recording-tip {
  font-size: 12px;
  opacity: 0.8;
}
</style>